<template>
  <BasicModal
    title="新增算法任务"
    width="500px"
    @register="register"
    @ok="handleRun"
    :showOkBtn="false"
  >
    <a-form :model="formData" layout="vertical">
      <a-form-item label="选择算法">
        <a-select v-model:value="formData.algorithmName" placeholder="请选择算法">
          <a-select-option value="algorithmName_1">一维层状介质交互反演</a-select-option>
          <a-select-option value="algorithmName_2">可控源电磁法：滤波静校正</a-select-option>
          <a-select-option value="algorithmName_3">常规电阻率/激电法：高密度法带地形二维反演</a-select-option>
          <a-select-option value="algorithmName_4">大地电磁法：起伏地形二维交互正演模拟</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="选择数据">
        <a-select v-model:value="formData.selectedData" placeholder="请选择数据">
          <a-select-option value="dataset_1">数据集 1</a-select-option>
          <a-select-option value="dataset_2">数据集 2</a-select-option>
          <a-select-option value="dataset_3">数据集 3</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <!-- 自定义底部 -->
    <template #footer>
      <a-button type="primary" @click="handleRun">运行</a-button>
    </template>
  </BasicModal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';

const formData = ref({
  algorithmName: '',
  selectedData: '',
});

const emit = defineEmits(['register', 'submit']);

const [register] = useModalInner((data) => {
  // 可以在打开弹窗时设置默认值
  formData.value.algorithmName = '';
  formData.value.selectedData = '';
});

function handleRun() {
  console.log('运行算法，参数为：', formData.value);
  // 可以 emit 给外部，也可以在此处发起请求
  emit('submit', formData.value);
}
</script>
